import React, { useState, useEffect } from 'react';
import './extraDialogue.scss';

function ExtraDialogue({ tablesData, handleTableChange, tableMdChange }) {
    const [editCell, setEditCell] = useState({ table: -1, row: -1, col: -1 });

    useEffect(() => {
        const allMarkdownTables = tablesData.map(table => convertToMarkdownTable(table));
        tableMdChange(allMarkdownTables.join('\n\n'));
    }, []);

    // 判断是否在编辑模式
    const isEditing = (tableIndex, row, col) =>
        editCell.tableIndex === tableIndex && editCell.row === row && editCell.col === col;

    // 处理单元格点击事件
    const handleCellClick = (tableIndex, row, col) => {
        setEditCell({ tableIndex, row, col });
    };

    // 处理单元格输入变化
    const handleCellChange = (tableIndex, row, col, value) => {
        const newTablesData = [...tablesData];
        newTablesData[tableIndex][row][col] = value;
        handleTableChange(newTablesData);
    };

    // 处理单元格失去焦点事件
    const handleBlur = () => {
        setEditCell({ table: -1, row: -1, col: -1 });
        const allMarkdownTables = tablesData.map(table => convertToMarkdownTable(table));
        tableMdChange(allMarkdownTables.join('\n\n'));
    };

    const closeFunction = (tableIndex) => {
        const newTablesData = [...tablesData];
        newTablesData.splice(tableIndex, 1);
        handleTableChange(newTablesData);
    };

    return (
        <div className="extra-dialogue">
            {tablesData.map((table, tableIndex) => (
                <div key={`table-${tableIndex}`} className="table-container">
                    <svg className="close" onClick={(e)=> {e.stopPropagation(); closeFunction(tableIndex);}} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_172_94574"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clipPath="url(#master_svg0_172_94574)"><g><path d="M15.0412609375,7.99946125Q15.0412609375,8.172341249999999,15.0328609375,8.34502125Q15.0243609375,8.51769125,15.0073609375,8.68974125Q14.9904609375,8.86179125,14.9650609375,9.03280125Q14.9397609375,9.20381125,14.9059609375,9.37337125Q14.8722609375,9.54293125,14.8302609375,9.71063125Q14.7882609375,9.87833125,14.7380609375,10.04377125Q14.6879609375,10.20921125,14.6296609375,10.37198125Q14.5714609375,10.53476125,14.5053609375,10.69448125Q14.4391609375,10.85420125,14.3652609375,11.01053125Q14.2913609375,11.16673125,14.2098609375,11.31923125Q14.1283609375,11.47173125,14.0395609375,11.62003125Q13.9506609375,11.76823125,13.8546609375,11.91203125Q13.7585609375,12.05573125,13.6556609375,12.19463125Q13.5526609375,12.33353125,13.4429609375,12.46713125Q13.3333609375,12.60073125,13.2172609375,12.72883125Q13.1011609375,12.85693125,12.9789609375,12.97923125Q12.8567609375,13.10143125,12.7286609375,13.21753125Q12.6005609375,13.33363125,12.4669609375,13.44333125Q12.3333609375,13.55303125,12.1944609375,13.65603125Q12.0556609375,13.75893125,11.9119609375,13.85503125Q11.7681609375,13.95103125,11.6199609375,14.03993125Q11.4716609375,14.12883125,11.3192609375,14.21033125Q11.1667609375,14.29183125,11.0105609375,14.36573125Q10.8542609375,14.43963125,10.6945609375,14.50583125Q10.5348709375,14.57193125,10.3721209375,14.63023125Q10.2093709375,14.68843125,10.0439509375,14.73863125Q9.8785409375,14.78883125,9.7108709375,14.83083125Q9.5431909375,14.87283125,9.3736609375,14.90653125Q9.2041209375,14.94033125,9.0331409375,14.96563125Q8.862150937500001,14.99103125,8.690130937500001,15.00793125Q8.518110937500001,15.02493125,8.3454609375,15.03343125Q8.1728209375,15.04193125,7.9999609375,15.04193125Q7.8271009375,15.04193125,7.6544609375,15.03343125Q7.4818109375,15.02493125,7.3097909375,15.00793125Q7.1377609375,14.99103125,6.9667809375,14.96563125Q6.7958009375,14.94033125,6.6262609375,14.90653125Q6.4567309375,14.87283125,6.2890509375,14.83083125Q6.1213809375,14.78883125,5.9559709375,14.73863125Q5.7905509375,14.68843125,5.6278009375,14.63023125Q5.4650509375,14.57193125,5.3053509375,14.50583125Q5.1456609375,14.43963125,4.9894009375,14.36573125Q4.8331409375,14.29183125,4.6806909375,14.21033125Q4.5282509375,14.12883125,4.379990937500001,14.03993125Q4.2317209375000004,13.95103125,4.0880009375,13.85503125Q3.9442809375,13.75893125,3.8054409375,13.65603125Q3.6666009375,13.55303125,3.5329809375,13.44333125Q3.3993609375,13.33363125,3.2712809375,13.21753125Q3.1432109375,13.10143125,3.0209809375,12.97923125Q2.8987509375,12.85693125,2.7826709375,12.72883125Q2.6665909375,12.60073125,2.5569309375,12.46713125Q2.4472709375,12.33353125,2.3443009375,12.19463125Q2.2413309375,12.05573125,2.1453009375,11.91203125Q2.0492609374999997,11.76823125,1.9604009375,11.62003125Q1.8715349374999999,11.47173125,1.7900509375,11.31923125Q1.7085679375,11.16673125,1.6346629375,11.01053125Q1.5607579375,10.85420125,1.4946089375,10.69448125Q1.4284599375,10.53476125,1.3702269375,10.37198125Q1.3119939375,10.20921125,1.2618169375,10.04377125Q1.2116389375,9.87833125,1.1696389375,9.71063125Q1.1276379375,9.54293125,1.0939159375,9.37337125Q1.0601939375,9.20381125,1.0348305375,9.03280125Q1.0094674375,8.86179125,0.9925246375,8.68974125Q0.9755818375,8.51769125,0.9671002475,8.34502125Q0.9586186375,8.172341249999999,0.9586186375,7.99946125Q0.9586186375,7.82658125,0.9671002475,7.65390125Q0.9755818375,7.48123125,0.9925246375,7.30918125Q1.0094674375,7.13713125,1.0348305375,6.96612125Q1.0601939375,6.79511125,1.0939159375,6.62555125Q1.1276379375,6.45599125,1.1696389375,6.28829125Q1.2116389375,6.12059125,1.2618169375,5.95515125Q1.3119939375,5.78971125,1.3702269375,5.62694125Q1.4284599375,5.46416125,1.4946089375,5.30444125Q1.5607579375,5.14472125,1.6346629375,4.98843125Q1.7085679375,4.83215125,1.7900509375,4.67968125Q1.8715349374999999,4.527211250000001,1.9604009375,4.37893125Q2.0492609374999997,4.23064125,2.1453009375,4.08689125Q2.2413309375,3.94315125,2.3443009375,3.80429125Q2.4472709375,3.66543125,2.5569309375,3.53179125Q2.6665909375,3.39815125,2.7826709375,3.27005125Q2.8987509375,3.14196125,3.0209809375,3.01971125Q3.1432109375,2.89746125,3.2712809375,2.78136125Q3.3993609375,2.66526125,3.5329809375,2.55559125Q3.6666009375,2.44591125,3.8054409375,2.34293125Q3.9442809375,2.23994125,4.0880009375,2.1438912500000002Q4.2317209375000004,2.04785125,4.379990937500001,1.95897125Q4.5282509375,1.87008825,4.6806909375,1.78859225Q4.8331409375,1.70709625,4.9894009375,1.6331802500000001Q5.1456609375,1.5592632499999999,5.3053509375,1.49310425Q5.4650509375,1.42694525,5.6278009375,1.36870325Q5.7905509375,1.31046125,5.9559709375,1.26027625Q6.1213809375,1.21009125,6.2890509375,1.16808425Q6.4567309375,1.12607725,6.6262609375,1.09234925Q6.7958009375,1.05862225,6.9667809375,1.03325495Q7.1377609375,1.00788785,7.3097909375,0.99094245Q7.4818109375,0.97399705,7.6544609375,0.96551416Q7.8271009375,0.95703125,7.9999609375,0.95703125Q8.1728209375,0.95703125,8.3454609375,0.96551416Q8.518110937500001,0.97399705,8.690130937500001,0.99094245Q8.862150937500001,1.00788785,9.0331409375,1.03325485Q9.2041209375,1.05862225,9.3736609375,1.09234925Q9.5431909375,1.12607725,9.7108709375,1.16808425Q9.8785409375,1.21009125,10.0439509375,1.26027625Q10.2093709375,1.31046125,10.3721209375,1.36870325Q10.5348709375,1.42694525,10.6945609375,1.49310425Q10.8542609375,1.5592632499999999,11.0105609375,1.6331802500000001Q11.1667609375,1.70709625,11.3192609375,1.78859225Q11.4716609375,1.87008825,11.6199609375,1.95897125Q11.7681609375,2.04785125,11.9119609375,2.1438912500000002Q12.0556609375,2.23994125,12.1944609375,2.34293125Q12.3333609375,2.44591125,12.4669609375,2.55559125Q12.6005609375,2.66526125,12.7286609375,2.78136125Q12.8567609375,2.89746125,12.9789609375,3.01971125Q13.1011609375,3.14196125,13.2172609375,3.27005125Q13.3333609375,3.39815125,13.4429609375,3.53179125Q13.5526609375,3.66543125,13.6556609375,3.80429125Q13.7585609375,3.94315125,13.8546609375,4.08689125Q13.9506609375,4.23064125,14.0395609375,4.37893125Q14.1283609375,4.527211250000001,14.2098609375,4.67968125Q14.2913609375,4.83215125,14.3652609375,4.98843125Q14.4391609375,5.14472125,14.5053609375,5.30444125Q14.5714609375,5.46416125,14.6296609375,5.62694125Q14.6879609375,5.78971125,14.7380609375,5.95515125Q14.7882609375,6.12059125,14.8302609375,6.28829125Q14.8722609375,6.45599125,14.9059609375,6.62555125Q14.9397609375,6.79511125,14.9650609375,6.96612125Q14.9904609375,7.13713125,15.0073609375,7.30918125Q15.0243609375,7.48123125,15.0328609375,7.65390125Q15.0412609375,7.82658125,15.0412609375,7.99946125Z" fill="var(--bg-color15)"/></g><g><path d="M11.21149875,4.77725575L11.22205875,4.78781575C11.40943875,4.97525575,11.40943875,5.27909575,11.22205875,5.46653575L8.68925875,7.99965875L11.22205875,10.53277875C11.40943875,10.72021875,11.40943875,11.02405875,11.22205875,11.21149875L11.21149875,11.22205875C11.02405875,11.40943875,10.72021875,11.40943875,10.53277875,11.22205875L7.99965875,8.68925875L5.4665367499999995,11.22205875C5.27909675,11.40943875,4.97525675,11.40943875,4.78781675,11.22205875L4.77725675,11.21149875C4.58987285,11.02405875,4.58987285,10.72021875,4.77725675,10.53277875L7.31005875,7.99965875L4.77725675,5.46653575C4.58987375,5.27909575,4.58987375,4.97525575,4.77725675,4.78781575L4.78781675,4.77725575C4.97525675,4.58987285,5.27909675,4.58987285,5.4665367499999995,4.77725575L7.99965875,7.31005875L10.53277875,4.77725675C10.72021875,4.58987335,11.02405875,4.58987335,11.21149875,4.77725575Z" fill="#FFFFFF"/></g></g></svg>
                    <table>
                        <thead>
                        <tr>
                            {table[0].map((header, colIndex) => (
                                <th key={colIndex}>{header}</th>
                            ))}
                        </tr>
                        </thead>
                        <tbody>
                        {table.slice(1).map((row, rowIndex) => (
                            <tr key={rowIndex}>
                                {row.map((cell, colIndex) => (
                                    <td
                                        key={colIndex}
                                        onClick={() => handleCellClick(tableIndex, rowIndex + 1, colIndex)}
                                        style={{ cursor: 'pointer' }}
                                    >
                                        {isEditing(tableIndex, rowIndex + 1, colIndex) ? (
                                            <input
                                                type="text"
                                                value={cell}
                                                onChange={(e) => handleCellChange(tableIndex, rowIndex + 1, colIndex, e.target.value)}
                                                onBlur={handleBlur}
                                                autoFocus
                                            />
                                        ) : (
                                            cell
                                        )}
                                    </td>
                                ))}
                            </tr>
                        ))}
                        </tbody>
                    </table>
                </div>
            ))}
        </div>
    );
}

const convertToMarkdownTable = (data) => {
    if (data.length === 0) return '';

    const maxWidths = data[0].map((_, i) =>
        Math.max(...data.map(row => (row[i] ? row[i].length : 0)))
    );

    const header = '| ' + data[0].map((cell, i) => cell.padEnd(maxWidths[i])).join(' | ') + ' |';
    const separator = '| ' + maxWidths.map(width => '-'.repeat(width)).join(' | ') + ' |';

    const body = data.slice(1).map(row =>
        '| ' + row.map((cell, i) => cell.padEnd(maxWidths[i])).join(' | ') + ' |'
    ).join('\n');

    return `${header}\n${separator}\n${body}`;
};

export default ExtraDialogue;
